<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="echarts.js"></script>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="china-main-city-map.js" charset="utf-8"></script>
	</head>
	<body>
		<div id= "main" style="width:300px;height:600px;"></div>
 <script type="text/javascript">
 
var myChart = echarts.init(document.getElementById('main'));
loadMap('320100', '南京市');
function loadMap(mapCode, mapName) {
	console.log(mapCode+" "+mapName);
    $.getJSON('china-main-city/' + mapCode + '.json', function (data) {
	     if (data) {
		     echarts.registerMap(mapName, data);
			 var option = {
		        tooltip: {
		            trigger: 'item',
		            formatter: function (params, ticket, callback) {
					    var content = params.data.name+"<br>"+params.data.value[2];
					    return content;
					}
		        },
		        toolbox: {
		            show: true,
		            orient: 'vertical',
		            left: 'right',
		            top: 'center',
		            feature: {
		                dataView: {readOnly: false},
		                restore: {},
		                saveAsImage: {}
		            }
		        },
		        legend: {
			        orient: 'vertical',
			        y: 'bottom',
			        x:'right',
			        data:['营业厅'],
			        textStyle: {
			            color: '#fff'
			        }
			    },
		        visualMap: {
		            min: 800,
		            max: 50000,
		            text:['High','Low'],
		            realtime: false,
		            calculable: true,
		            inRange: {
		                color: ['lightskyblue','yellow', 'orangered']
		            }
		        },
		        geo: {
			        map: mapName,
			        label: {
			            emphasis: {
			                show: false
			            }
			        },
			        itemStyle: {
			            normal: {
			            },
			            emphasis: {
			                areaColor: '#2a333d'
			            }
			        }
			    },
				series: [
					{
						name: '营业厅',
						type: 'scatter',
						mapType: mapName,
						coordinateSystem: 'geo',
						label: {
							normal: {
								show: false
							},
							emphasis: {
								show: false
							}
						},
						data:[
						    {name: '雨花台区', value: [118.787187,31.996941,20057.34]},
						    {name: '秦淮区', value: [,20057.34]},
							{name: '下关区', value: [,15477.48]},
							{name: '玄武区', value: [118.806303,32.053269,31686.1]},
							{name: '溧水县', value: [119.033394,31.65578,6992.6]},
							{name: '白下区', value: [,44045.49]},
							{name: '高淳县', value: [118.901739,31.331859,40689.64]},
							{name: '鼓楼区', value: [118.774826,32.070895,37659.78]},
							{name: '建邺区', value: [118.774826,32.070895,45180.97]},
							{name: '江宁区', value: [118.840366,31.955162,55204.26]},
							{name: '六合区', value: [118.825419,32.32633,21900.9]},
							{name: '浦口区', value: [118.635984,32.063796,4918.26]},
							{name: '栖霞区', value: [118.92028,32.100387,5881.84]},
							
						]
					}
				]
			 };
			 myChart.setOption(option);
				
		 } else {
             alert('无法加载该地图');
		 }		 
	});
}

 
 </script>
		
		
	</body>
</html>
